import React, { useState } from 'react';
import { history } from 'umi';
import { Row, Col, Steps, Typography, Form, Input, Radio, Select, DatePicker, Button, Tabs, RadioChangeEvent } from 'antd';
import styles from './style.less';
import DebounceSelect from './components/DebounceSecect';
import { OptionsValue } from './data';
import { selectSearch } from './service';
import Rules from './mockData';
console.log(Rules)

const { Step } = Steps;
const { Title } = Typography;
const { Option } = Select;
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
// DatePicker, Switch

export default function Detail() {
  const [basicForm] = Form.useForm();
  const [basicOtherForm] = Form.useForm();
  const [value, setValue] = useState<OptionsValue[]>([]);
  const [tabVal, setTabVal] = useState('1');
  // const params = useLocation();
  console.log(history.location);
  // const name = history.location.state.name;
  const [radioValue, setRadioValue] = useState(1);

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
    setRadioValue(e.target.value);
  };

  const handleCancel = () => {
    basicForm.resetFields();
    basicOtherForm.resetFields();
    history.goBack();
  }

  const callback = (key: any) => {
    console.log(key);
    setTabVal(key);
  }

  return (
    <Row className={styles.row}>
      <Col flex={1}>
        <Steps progressDot current={0} direction="vertical" className={styles.step}>
          <Step
            title="推广计划"
            description=''
          />
          <Step
            title="推广单元"
            description={
              <>
                <div>目标详情</div>
                <div>投放位置</div>
                <div>预算及出价</div>
                <div>用户定向</div>
                <div>第三方推广链接</div>
              </>
            }
          />
          <Step
            title="推广创意"
            description={
              <>
                <div>制作创意</div>
                <div>创意分类</div>
                <div>推广卡片</div>
                <div>落地页</div>
              </>
            }
          />
        </Steps>
      </Col>
      <Col flex={22}>
        <div className={styles.container} style={{ display: 'none' }}>
          <Form.Provider>
            {/* 标题 */}
            <Title level={5}>基础设置</Title>
            {/* 基础设置表单 */}
            <Form form={basicForm} name="basicForm" className={styles.form} onFinish={onFinish} labelCol={{ span: 6 }} initialValues={{ target: 0, area: '全部地域' }}>
              <Form.Item name='planName' label='计划名称' rules={Rules.basicForm.planName} className={styles.formItem}>
                <Input placeholder='请输入计划名称' allowClear className={styles.formItemContent} />
              </Form.Item>
              <Form.Item name='housesId' label='关联楼盘' rules={Rules.basicForm.build} className={styles.formItem}>
                <DebounceSelect
                  mode="multiple"
                  value={value}
                  placeholder="关联楼盘"
                  allowClear
                  className={styles.formItemContent}
                  fetchOptions={selectSearch}
                  onChange={newValue => {
                    setValue(newValue);
                  }}
                />
              </Form.Item>
              <Form.Item name='target' label='推广目标' rules={Rules.basicForm.target} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue} className={styles.formItemContent}>
                  <Radio value={0}>网站链接</Radio>
                  <Radio value={1}>应用推广</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item name='business' label='推广业务' className={styles.formItem}>
                <Select allowClear placeholder="推广业务" className={styles.formItemContent}>
                  <Option value="房产平台">房产平台  房产家居-房产中介-房产平台</Option>
                  <Option value="新房买卖">新房买卖  房产家居-房产中介-房屋出售-新房买卖</Option>
                </Select>
              </Form.Item>
              <Form.Item name='area' label='推广地域' rules={Rules.basicForm.area} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue} className={styles.formItemContent}>
                  <Radio value={'全部地域'}>账户地域</Radio>
                  <Radio value={'自定义计划地域'}>自定义计划地域</Radio>
                </Radio.Group>
                {/* 根据单选项切换相应内容 */}
              </Form.Item>
              <Form.Item name='extensionTime' label='推广时间' rules={Rules.basicForm.extensionTime} className={styles.formItem}>
                <RangePicker className={styles.formItemContent} />
              </Form.Item>
              <Form.Item name='extensionInterval' label='推广时段' rules={Rules.basicForm.extensionInterval} className={styles.formItem}>
                <RangePicker className={styles.formItemContent} />
              </Form.Item>
            </Form>
            {/* 标题 */}
            <Title level={5}>预算及出价</Title>
            {/* 预算及出价表单 */}
            <Form form={basicOtherForm} name="budgetBidForm" className={styles.form} onFinish={onFinish} labelCol={{ span: 6 }} initialValues={{ equipmentBid: 0 }}>
              <Form.Item label='每日预算' rules={Rules.budgetBidForm.budget} className={styles.formItem}>
                <Form.Item name='budget'>
                  <Input placeholder='请输入每日预算' allowClear className={styles.formItemContent} />
                </Form.Item>
                <span className={styles.tips}>每日预算值不可为小数，并且数值不低于50</span>
              </Form.Item>
              <Form.Item name='equipmentBid' label='设备出价设置' rules={Rules.budgetBidForm.equipmentBid} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue} className={styles.formItemContent}>
                  <Radio value={0}>移动出价比例</Radio>
                  <Radio value={1}>计算机出价比例</Radio>
                </Radio.Group>
                {/* 根据单选项切换相应内容 */}
              </Form.Item>
              {radioValue === 0 ?
                <Form.Item label='移动出价' rules={Rules.budgetBidForm.mobileBid} className={styles.formItem}>
                  <Form.Item name='mobileBid'>
                    <Input placeholder='请输入移动出价' allowClear className={styles.formItemContent} />
                  </Form.Item>  * 计算机出价
                </Form.Item> : <Form.Item label='计算机出价' rules={Rules.budgetBidForm.pcBid} className={styles.formItem}>
                  <Form.Item name='pcBid'>
                    <Input placeholder='请输入计算机出价' allowClear className={styles.formItemContent} />
                  </Form.Item>  * 移动出价
                </Form.Item>
              }
            </Form>
          </Form.Provider>
          <div>
            <Button type='primary' className={styles.saveBtn}>保存并新建单元</Button>
            <Button type='primary' className={styles.saveBtn}>仅保存</Button>
            <Button onClick={handleCancel}>取消</Button>
          </div>
        </div>
        <div className={styles.container}>
          <Tabs defaultActiveKey={tabVal} onChange={callback}>
            <TabPane tab="新建推广计划" key="1"></TabPane>
            <TabPane tab="选择已有推广计划" key="2"></TabPane>
          </Tabs>
          {/* <div style={tabVal === '1' ? { display: 'block' } : { display: 'none' }}> */}
          <Form.Provider>
            <div style={tabVal === '1' ? { display: 'block' } : { display: 'none' }}>
              {/* 标题 */}
              <Title level={5}>推广计划</Title>
              <Form form={basicForm} name="basicForm" className={styles.form} onFinish={onFinish} labelCol={{ span: 6 }} initialValues={{ adType: 0, extendTarget: '销售线索收集', budgetInfinite: 1 }}>
                <Form.Item name='adType' label='广告类型' rules={Rules.basicForm.target} className={styles.formItem}>
                  <Radio.Group onChange={onChange} value={radioValue} className={styles.formItemContent}>
                    {/* <Radio value={2}>所有广告</Radio> */}
                    <Radio value={0}>展示广告</Radio>
                    {/* <Radio value={1}>搜索广告</Radio> */}
                  </Radio.Group>
                </Form.Item>
                <Form.Item name='extendTarget' label='推广目标' rules={Rules.basicForm.target} className={styles.formItem}>
                  <Radio.Group onChange={onChange} value={radioValue} className={styles.formItemContent}>
                    <Radio value='销售线索收集'>销售线索收集</Radio>
                    <Radio value='网页推广'>网页推广</Radio>
                    {/* <Radio value={1}>品牌活动推广</Radio> */}
                  </Radio.Group>
                </Form.Item>
                <Form.Item name='budgetInfinite' label='每日预算' rules={Rules.basicForm.target} className={styles.formItem}>
                  <Radio.Group onChange={onChange} value={radioValue} className={styles.formItemContent}>
                    <Radio value={1}>不限</Radio>
                    <Radio value={0}>自定义预算</Radio>
                  </Radio.Group>
                </Form.Item>
                <Form.Item name='planName' label='计划名称' rules={Rules.basicForm.planName} className={styles.formItem}>
                  <Input placeholder='请输入计划名称' allowClear className={styles.formItemContent} />
                </Form.Item>
                <Form.Item name='housesId' label='关联楼盘' rules={Rules.basicForm.build} className={styles.formItem}>
                  <DebounceSelect
                    mode="multiple"
                    value={value}
                    placeholder="关联楼盘"
                    allowClear
                    className={styles.formItemContent}
                    fetchOptions={selectSearch}
                    onChange={newValue => {
                      setValue(newValue);
                    }}
                  />
                </Form.Item>
              </Form>
              <div>
                <Button type='primary' className={styles.saveBtn}>保存并新建单元</Button>
                <Button type='primary' className={styles.saveBtn}>仅保存</Button>
                <Button onClick={handleCancel}>取消</Button>
              </div>
            </div>
            <div style={tabVal === '2' ? { display: 'block' } : { display: 'none' }}>
              <Form form={basicOtherForm} name="basicOtherForm" className={styles.form} onFinish={onFinish} labelCol={{ span: 6 }}>
                <Form.Item name='planName' label='计划名称' rules={Rules.basicForm.planName} className={styles.formItem}>
                  <Input placeholder='请输入计划名称' allowClear className={styles.formItemContent} />
                </Form.Item>
              </Form>
              <div>
                <Button type='primary' className={styles.saveBtn}>跳转并新建单元</Button>
                <Button onClick={handleCancel}>取消</Button>
              </div>
            </div>
          </Form.Provider>
          {/* </div> */}
        </div>
      </Col>
    </Row>
  );
}
